<template>
  <div class="fill config flex-row">
    <div class="close flex-center">
      <vs-button
          @click.stop="windowMethods.handleMinimize"
          circle
          icon
          warn
          floating
      >
        <i class='el-icon-minus' style="font-size: 10px"></i>
      </vs-button>
      <vs-button
          @click.stop="windowMethods.handleClose"
          circle
          icon
          danger
          floating
      >
        <i class='el-icon-close' style="font-size: 10px"></i>
      </vs-button>
    </div>
    <div class="nav h-fill">
      <div class="title">设置</div>
      <ul>
        <li class="item"
            :class="{active: index===active}"
            :key="item.is"
            v-for="(item, index) in configList"
            @click="handleActive(index)"
        >
          <i :class="item.icon"/>
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div class="main flex-1 h-fill flex-col">
      <div class="title"> {{configList[active].label}}</div>
      <div class="component flex-1 w-fill">
        <keep-alive>
          <component :is="configList[active].is"/>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import ConfigAbout from "@/layouts/window/config/ConfigAbout"
import ConfigAccount from "@/layouts/window/config/ConfigAccount"
import ConfigLogin from "@/layouts/window/config/ConfigLogin"
import ConfigSysConfig from "@/layouts/window/config/ConfigSysConfig"

export default {
  name: "Config",
  components: {ConfigAbout, ConfigAccount, ConfigLogin, ConfigSysConfig},
  props:{
    windowMethods: {}
  },
  data: () => ({
    configList: [
      {label: "系统设置", icon: "el-icon-setting", is: "ConfigSysConfig"},
      {label: "账户信息", icon: "el-icon-user", is: "ConfigAccount"},
      {label: "登录选项", icon: "el-icon-unlock", is: "ConfigLogin"},
      {label: "关于", icon: "el-icon-warning-outline", is: "ConfigAbout"},
    ],
    active: 0
  }),
  methods:{
    handleActive(index){
      if(index===this.active){
        return
      }
      this.active = index
    },
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.config {
  user-select: none;

  .close{
    height: 30px;
    z-index: 99;
    position: absolute;
    right: 0;
  }

  .nav {
    background-color: rgba(224, 224, 224, 0.85);
    width: 180px;

    .title {
      text-align: center;
      font-weight: 600;
      line-height: 60px;
      font-size: $fz-l;
    }

    .item {
      height: 46px;
      line-height: 46px;
      //background-color: #909399;
      padding-left: $pn;

      &:hover {
        background-color: rgba(0, 0, 0, 0.2);
      }
    }

    .active {
      //background-color: red;
      border-left: 6px slateblue solid;
    }
  }

  .main {
    background-color: rgba(255, 255, 255, 0.85);
    .title{
      font-size: $fz-nx;
      line-height: 60px;
      padding-left: $pn;
    }
  }
}
</style>
